<template>
  <div class="goods-list">
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      @top-status-change="handleTopChange"
      ref="loadmore"
      :auto-fill="false"
      :bottom-all-loaded="allLoaded"
    >
      <div class="goods-field">
        <div v-for="(item, index) in goodsList" :key="index" class="goods-item">
          <img src="http://cs-static-assets.oss-cn-beijing.aliyuncs.com/kaikeba/banner3.jpg" alt="images" />
          <div class="item-bottom">
            <span>{{ item.title }}</span>
            <div>
              <span class="sell-price">¥{{ item.sell_price }}</span>
              <del>¥{{ item.market_price }}</del>
            </div>
          </div>
        </div>
      </div>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
        <span v-show="topStatus === 'loading'">Loading...</span>
      </div>
    </mt-loadmore>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      topStatus: undefined,
      allLoaded: false,
      currPage: 1
    };
  },
  methods: {
    ...mapActions('home/goodsListStore', ['getGoodsList']),
    loadTop () {
      // 下拉刷新
      // 进行重新定位
      this.$refs.loadmore.onTopLoaded()
    },
    handleTopChange(status) {
      this.topStatus = status
    },
    // 上拉加载
    loadBottom () {
      // 加载更多数据
      this.allLoaded = true; // 若数据已全部获取完毕
      console.log(11);
      // 进行重新定位
      this.$refs.loadmore.onBottomLoaded();
    }
  },
  computed: {
    ...mapState('home/goodsListStore', ['goodsList'])
  },
  created () {
    this.getGoodsList({
      payload: {
        page: this.currPage
      }
    })
  }
}
</script>

<style scoped lang="less">
  .goods-list {
    .goods-field {
      display: flex;
      flex-wrap: wrap;
      .goods-item {
        border: 1px solid lightblue;
        box-sizing: border-box;
        width: 48%;
        height: 200px;
        margin: 5px 1%;
        img {
          width: 100%;
          height: 100px;
        }
        .item-bottom {
          .sell-price {
            color: red;
          }
        }
      }
    }
  }
</style>